<div>
    <div id="banner-container">

    <span id="banner-title" ng-click="goHome()">
        <div>Haiku Depot Server</div>
    </span>

    <span id="banner-actions" ng-show="canShowBannerActions()">

        <div class="banner-actions-state-container">
            <svg width="15" height="16">
                <!-- flag pole -->
                <path stroke="none" fill="rgba(255,255,255,0.5)" d="M2.5 16 L2.5 4 C 0 1 5.5 1 3.5 4 L3.5 16 Z"/>
                <!-- flag -->
                <path stroke="none" fill="rgba(255,255,255,0.5)" d="M4 4 C 6 1.5 11 6.5 14 4 L 14 12 C 11 14.5 6 9.5 4 12 Z"/>
            </svg>
            <span>
                <natural-language-chooser
                        natural-language-title-class="banner-actions-text"
                        natural-language-code="naturalLanguageCode">
                </natural-language-chooser>
            </span>
        </div>

        <div class="banner-actions-state-container" ng-show="userNickname">
            <svg width="9" height="16">
                <!-- body -->
                <path stroke="none" fill="rgba(255,255,255,0.5)" d="M0.5 16 L0.5 12 A4 4 0 0 1 8.5 12 L8.5 16 Z"/>
                <!-- head -->
                <circle fill="rgba(255,255,255,0.5)" stroke="none" cx="4.5" cy="5" r="2.5" />
            </svg>
            <span><a href="" ng-click="goViewUser()" class="banner-actions-text">{{userNickname}}</a></span>
        </div>

        <button ng-click="goShowActions()">
            <svg width="18" height="18">
                <path stroke-width="2" stroke="white" fill="none" d="M0 4 L18 4"/>
                <path stroke-width="2" stroke="white" fill="none" d="M0 9 L18 9"/>
                <path stroke-width="2" stroke="white" fill="none" d="M0 14 L18 14"/>
            </svg>
        </button>

    </span>

        <div
                id="banner-warning-non-production"
                ng-show="showWarnNonProduction"
                ng-click="goHideWarnNonProduction()">
            <message key="banner.warning.nonProductionDeploy"></message>
        </div>

    </div>

    <!--
    This will display a modal panel that contains the actions that are triggered by the action button the right
    hand side of the banner.
    -->

    <modal-container show="showActions" width="420" close="goHideActions()">

        <ul class="context-menu-container">
            <li ng-show="canGoMore()">
                <a href="" ng-click="goMore()">
                    <message key="banner.action.more"></message>
                </a>
            </li>

            <li ng-show="canAuthenticateOrCreate()">
                <a href="" ng-click="goAuthenticate()">
                    <message key="banner.action.authenticate"></message>
                </a>
            </li>

            <li ng-show="canAuthenticateOrCreate()">
                <a href="" ng-click="goCreateUser()">
                    <message key="banner.action.createUser"></message>
                </a>
            </li>

            <li ng-show="canShowAuthenticatedUser()">
                <a href="" ng-click="goViewUser()">
                    <message key="banner.action.user" parameters="[userNickname]"></message>
                </a>
            </li>

            <li ng-show="canShowAuthenticatedUser()">
                <a href="" ng-click="goLogout()">
                    <message key="banner.action.logout" parameters="[userNickname]"></message>
                </a>
            </li>

            <li ng-show="canShowRepository()" show-if-permission="'REPOSITORY_LIST'">
                <a href="" ng-click="goListRepositories()">
                    <message key="banner.action.repositories"></message>
                </a>
            </li>

            <li>
                <a href="" ng-click="goPkgFeedBuilder()">
                    <message key="banner.action.pkgFeedBuilder"></message>
                </a>
            </li>

            <li ng-show="canGoReports()">
                <a href="" ng-click="goReports()">
                    <message key="banner.action.reports"></message>
                </a>
            </li>

            <li ng-show="canGoListUsers()" show-if-permission="'USER_LIST'">
                <a href="" ng-click="goListUsers()">
                    <message key="banner.action.users"></message>
                </a>
            </li>

            <li show-if-permission="'AUTHORIZATION_CONFIGURE'">
                <a href="" ng-click="goListAuthorizationPkgRules()">
                    <message key="banner.action.authorizationPkgRules"></message>
                </a>
            </li>

            <li ng-show="canShowRootOperations">
                <a href="" ng-click="goRootOperations()">
                    <message key="banner.action.rootOperations"></message>
                </a>
            </li>

        </ul>

    </modal-container>

</div>




